<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>健康管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/heathly/tiwen' }">用户新增</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="margintop20">
      <el-col>
        <el-button type="success" @click=" showDialog">体温检测登录</el-button>
      </el-col>

      <el-col>
        <el-table
          :data="tiwenList"
          style="width:100%"
          class="tableinfo margintop20"
           :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :row-class-name="tableRowClassName"
        >
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="登记时间" prop="time">
            <template slot-scope="scope">{{scope.row.time | timeFormat('YY-MM-DD HH:mm:ss')}}</template>
          </el-table-column>
          <el-table-column label="登记体温(℃)" prop="tiwen">
            <template slot-scope="scope">{{scope.row.tiwen }}</template>
          </el-table-column>
          <el-table-column label="状态" prop="tiwen">
            <template slot-scope="scope">
              <el-tag effect="plain" type="danger" v-if="scope.row.tiwen>37.3">发烧</el-tag>
              <el-tag effect="plain" type="success" v-else>正常</el-tag>
            </template>
          </el-table-column>

           <el-table-column label="是否检测" >
                        <template slot-scope="scope">
                            <el-switch  
                                v-if="scope.row.tiwen>37.3"
                                v-model="scope.row.ishei"
                                active-text="是"
                                inactive-text="否"
                                active-color="#67C23A"
                                inactive-color="#F56C6C"
                                active-value="1"
                                inactive-value="0"
                                @change="changeIsHei(scope.row)"
                            >
                                
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column label="核酸结果" >
                        <template slot-scope="scope">
                            <el-switch 
                         
                                v-model="scope.row.is_yin"
                                active-text="阴性"
                                inactive-text="阳性"
                                active-color="#67C23A"
                                inactive-color="#F56C6C"
                                active-value="1"
                                inactive-value="0"
                                @change="changeIsYin(scope.row)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="showUpdate(scope.row)" type="info"  icon="el-icon-edit" circle></el-button>
              <el-popconfirm
                confirmButtonText="好的"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="你确定要删除吗?"
                @onConfirm="delOneList(scope.row)"
              >
                <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog title="添加体温记录" 
    :visible.sync="dialogVisible" 
    width="30%" 
    :before-close="handleClose">
      <el-form
        :model="form"
        :rules="rules"
        ref="myform"
        label-width="100px"
        label-position="right"
        class="myform"
      >
        <el-form-item label="当前体温(℃)" prop="tiwen">
          <el-input v-model="form.tiwen"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTiwenAction">确 定</el-button>
      </span>
    </el-dialog>

     <el-dialog
            title="修改体温记录"
            :visible.sync="updateVisible"
            width="30%"
            :before-close="updateClose">
            <el-form 
                :model="update" 
                :rules="rules"
                ref="updateform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="当前体温" prop="tiwen">
                    <el-input v-model="update.tiwen"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateTiwenAction">修改</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import { addtiwenAjax, mytiwenlist,delOnelistAjax,updatetiwenone,updateishei,updateisyin } from "@/api";
import Vue from "vue"
export default {
  data() {
    return {
      dialogVisible: false,
      updateVisible:false,
      form: {},
      update:{},
      tiwenList: [],
       rules: {
        tiwen: [
          { required: true, message: "请输入体温记录", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /((^3[5-9])(\.\d+)?|^(40)(\.0+)?)$/;
              if (reg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入合法体温数值"));
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
      changeIsYin(row){
           updateisyin({
                _id:row._id,
                is_yin:row.is_yin
            }).then(res=>{
                if(res.type){
                    
                }
            })


      },
      //是否做核算检测
      changeIsHei(row){
         updateishei({
                _id:row._id,
                ishei:row.ishei,
            }).then(res=>{
                if(res.type){
                    
                }
            })
      },
      updateTiwenAction(){
          this.$refs.updateform.validate((valid) => {
        if (valid) {
            updatetiwenone({
                //   _id:this.update._id,
                // tiwen:this.update.tiwen
                ...this.update

            })
            .then(res=>{
                if(res.type){
                    this.updateVisible=false
                    this.tiwenList.forEach((item,idx)=>{
                                if(item._id==this.update._id){
                                    Vue.set(this.tiwenList,idx,this.update)
                                }
                            })
                }

              
      })
            
        } else {
          this.$message.error("请完善信息再提交");
          return false;
        }
      });

      },
      showUpdate(row){
        this.updateVisible=true
        this.update={
            // tiwen:row.tiwen,
            // _id:row._id
            ...row
            }


      },
      delOneList(row){
       delOnelistAjax({
           _id:row._id
       })
       .then(res=>{
           if(res.type){
               this.tiwenList = this.tiwenList.filter(item=>item._id !== row._id)
           }
       })
       .catch(err=>{

       })
      },
    tableRowClassName({ row, rowIndex }) {
      if (row.tiwen > 37.3) {
        return "warning-row";
      }
      return "";
    },
    addTiwenAction() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          addtiwenAjax({
            tiwen: this.form.tiwen,
          })
            .then((res) => {
              if (res.type) {
                (this.dialogVisible = false),
                  (this.tiwenList = res.result),
                  (this.form = {});
              }
            })
            .catch((err) => {});
        } else {
          this.$message.error("请完善信息再提交");
          return false;
        }
      });
    },
    updateClose(){
    this.updateVisible = false;
    },
    handleClose() {
     this.dialogVisible = false;   
    },
    showDialog() {
      this.dialogVisible = true;
    },
    //获取列表渲染
    getlist(params) {
      mytiwenlist()
        .then((res) => {
          if (res.type) {
            this.tiwenList = res.result;
          }
        })
        .catch((err) => {});
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>